<!--
 * @Description: 支付
 * @Author: your name
 * @Date: 2024-05-22
 * @LastEditTime: 2024-05-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="pay_combo">
    <div class="order_bg">
      <div class="heart_w">
        <div class="order_left">在线支付</div>
        <div class="order_right">
          <ul>
            <li>
              <img src="@/assets/images/order_white.png" alt="" />
              <p class="pactive">订单填写</p>
            </li>
            <li>
              <img src="@/assets/images/line.png" alt="" />
            </li>
            <li>
              <img src="@/assets/images/online_payred.png" alt="" />
              <p style="color: #bd0000">在线支付</p>
            </li>
            <li>
              <img src="@/assets/images/line.png" alt="" />
            </li>
            <li>
              <img src="@/assets/images/order_comp.png" alt="" />
              <p>订单完成</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="busine_info heart_w">
      <div class="book_t">
        <p>订单编号：{{ orderForm.order_sn }}</p>
        <p>
          订单金额：<span>¥{{ orderForm.order_money }}</span>
        </p>
      </div>
      <h3>选择支付方式</h3>
      <div class="use_coupon">
        <ul>
          <li
            :class="{ activeli: activeli == 1 }"
            data-method="wechat"
            @click="activeli = 1"
          >
            <img src="@/assets/images/wxpay.png" alt="" />
          </li>
          <li
            :class="{ activeli: activeli == 2 }"
            data-method="alipay"
            @click="activeli = 2"
          >
            <img src="@/assets/images/alipay.png" alt="" />
          </li>
          <li
            :class="{ activeli: activeli == 3 }"
            data-method="paypal"
            @click="activeli = 3"
          >
            <img
              title="仅支持 PayPal 国外注册用户"
              width="140px"
              src="@/assets/images/Paypal.png"
            />
          </li>
        </ul>
      </div>

      <div class="paymentAmount">
        <p>
          应付金额：
          <span>¥ {{ orderForm.order_money }} </span>
        </p>
        <button class="submitorder" @click="placeOrder">提交订单</button>
      </div>
    </div>

    <!-- 支付表单 -->
    <div class="aliform" v-html="aliform"></div>
  </div>
</template>

<script>
import { createOrder, payMoney, payAlipay, payWechat } from '@/api/payment.js'

export default {
  name: 'pay_combo',
  data() {
    return {
      activeli: 2,
      orderForm: {},
      order_id: '',
      aliform: ''
    }
  },
  created() {
    console.log(this.$route.query)
    this.getOrder(this.$route.query)
  },
  mounted() {},
  methods: {
    async getOrder(idt) {
      let { data: data } = await createOrder({
        id: idt.id,
        coupon_id: idt.coupon_id,
        address_id: idt.address_id
      })
      this.order_id = data.data.order_id
      this.orderForm = data.data
    },
    async placeOrder(vals) {
      if (this.activeli == 1) {
        // 微信支付
        const { data: data } = await payWechat({ id: this.order_id })
        const htmlDoc = new DOMParser().parseFromString(data.data, 'text/html')
        // 提取跳转链接
        const metaRefresh = htmlDoc.getElementById('redirect')
        if (metaRefresh) {
          const redirectUrl = metaRefresh
            .querySelector('a')
            .getAttribute('href')
          window.location.href = redirectUrl
          console.log(redirectUrl)
        }
      } else if (this.activeli == 2) {
        // 支付宝支付
        let { data: data } = await payAlipay({ id: this.order_id })
        this.aliform = data.data
        this.$nextTick(() => {
          document.forms['alipay_submit'].submit()
        })
      } else if (this.activeli == 3) {
        // 余额支付
        let { data: data } = await payMoney({ id: this.order_id })
        if (data.code == 0) {
          this.$message.warning({
            message: data.msg,
            iconClass: ' ',
            customClass: 'el-message--warning',
            type: 'warning'
          })
          console.log(this.activeli, '余额支付', data)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/order_combo.scss';

.pay_combo {
  padding-bottom: 35px;
}

.busine_info {
  padding-top: 25px;

  .book_t {
    width: 1112px;
    line-height: 50px;
    background: #f3f5f7;
    margin: 0px auto 28px;
    padding: 15px;

    p:last-child {
      span {
        color: #ff6e00;
        font-size: 22px;
      }
    }

    p {
      font-size: 18px;
      text-indent: 20px;
    }

    & + h3 {
      width: 1112px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #333;
      display: block;
      margin: 0 auto;
      margin-bottom: 12px;
    }
  }

  .use_coupon {
    width: 1113px;
    font-size: 16px;
    color: #666;
    border-top: 1.8px solid #f3f5f7;
    border-bottom: 1.8px solid #f3f5f7;
    margin: 0 auto;

    ul {
      height: 100px;
      margin: 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .activeli {
        border: 1.5px solid #bd0008 !important;
      }
      li {
        cursor: pointer;
        width: 27%;
        height: 100%;
        line-height: 100px;
        text-align: center;
        border: 1.5px solid #e5e5e5;
        border-radius: 3px;
        box-sizing: border-box;
        float: left;
        margin-right: 55px;

        img {
          user-select: none;
          -webkit-user-drag: none; /* Safari */
          -khtml-user-drag: none; /* Konqueror HTML */
          -moz-user-drag: none; /* Old versions of Firefox */
          -o-user-drag: none; /* Opera */
        }
      }
    }
  }

  .paymentAmount {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 12px;
    width: 1152px;
    font-size: 20px;

    p {
      margin-bottom: 8px;

      span {
        color: #fd894f;
        font-size: 24px;
      }
    }

    .submitorder {
      width: 120px;
      height: 40px;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
